<template>
    <div class="header">
        <div class="header-left iconfont" @click="gohome" v-html="shop.backicon"></div>
        <div class="header-center">{{ shop.title }}</div>
        <div class="header-right"><span class="iconfont" @click="gocart" v-html="shop.icon"></span></div>
    </div>
</template>


<script>
export default {
    props:['shop'],
    data(){
        return{
            infor:''
        }
    },
    methods:{
        gocart(){  
            if(this.shop.router == '1'){
                this.$router.go(1) 
            }
            else{
                this.$router.push(this.shop.go)
            }
        },
        gohome(){
            console.log(this.shop.router == '/')
            if(this.shop.router == '-1'){
                this.$router.go(-1) 
            }
            else{
                this.$router.push(this.shop.router)
            }   
        }
    },
    computed:{
        message(){
            return this.infor = this.shop
        }
    }
}
</script>


<style scoped>
.header{ 
    width: 100%;
    display:flex;
    background:  #591514;
    height: 2.5rem;
    color: #f6e0c2;
    font-size: .7rem;
    position:fixed;
    top: 0;
    left: 0;
    z-index: 555;
}
.header .header-center{
    flex:1;
    line-height: 1.5rem;
    margin: auto;
    text-align: center;
}
.header-center span{
    float: right;
    margin-right:3%;
    font-size: 1rem; 
}
.header-left,.header-right{
    margin:0 3%;
    line-height: 2.5rem;      
}
.header-right span{
    font-size: 1rem; 
}
</style>
